<template>
  <button
      class="bin-button"
      @click="handleClick"
      :disabled="disabled || loading"
      :type="nativeType"
      :class="['bin-button--' + type , 'bin-button--' + size,
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-transparent': transparent
      }
    ]"
  >
    <b-icon class="button-loading icon-is-rotating" :name="loadingIcon?loadingIcon:'loading'" v-if="loading"></b-icon>
    <i :class="['iconfont','icon-'+icon]" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'BButton',
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: {
        type: String,
        default: 'default'
      },
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      loadingIcon: {
        type: String
      },
      disabled: Boolean,
      plain: Boolean,
      round: Boolean,
      transparent: Boolean
    },
    methods: {
      handleClick (evt) {
        this.$emit('click', evt)
      }
    }
  }
</script>
